<template>
    <div>
        <van-tabs v-model="active" @click="Onclick" >
            <van-tab v-for="(v,k) in brotherCategory" :key="k" :title="v.name" class="channel_con"  :name="v.id" >
                <!-- 内容 {{ k }} -->
                <h2>{{v.name}}</h2>
                <p>{{v.front_name}}</p>
                <div class="goods topic1">
                    <div class="goods-pic">
                        <div class="goods_pic" v-for="v in currentCategoryList" :key="v.id" v-lazy="v.list_pic_url">
                            <img :src="v.list_pic_url" alt="" >
                            <span>{{v.name}}</span>
                            <span> ￥ {{v.retail_price.toFixed(2)}} 元 </span>
                        </div>
                    </div>
                </div>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script>
import {Category,currentCategory} from '../request/home.js'
export default {
    name: 'Wjm0714Channel',

    data() {
        return {
            brotherCategory:[],
            currentCategoryList:[],
            index:'',
            id:'',
            active:''
        };
    },

    mounted() {
        
    },

    methods: {
        change_cla(k){
            console.log(k);
            this.$router.push({
                path:'/channel',
                query:{
                    id:this.brotherCategory[k].id
                }
            })
        },
        Onclick(name){
            console.log(this.active);
            console.log(name);
            this.$router.push({
                path:'/channel',
                query:{
                    id:name
                }
            }),
            currentCategory(name)
            .then(res=>{
                console.log(res.data.data.data);
                this.currentCategoryList = res.data.data.data
            })
            .catch(err=>{
                console.log(err);
            })
        }
    },
    created(){
        console.log(this.$route.query.id);
        let new_id = Number(this.$route.query.id);
        console.log(new_id);
        this.active = new_id;
        Category(this.$route.query.id)
        .then(res=>{
            console.log(res.data.data);
            console.log(res.data.data.brotherCategory);
            this.brotherCategory = res.data.data.brotherCategory
        })
        .catch(err=>{
            console.log(err);
        })
        // 当前页面数据
        currentCategory(this.$route.query.id)
        .then(res=>{
            console.log(res.data.data.data);
            console.log(res);
            this.currentCategoryList = res.data.data.data
            
        })
        .catch(err=>{
            console.log(err);
        })
    },
    // watch:{
    //     index(newval,oldval){
    //         console.log(newval);
    //         this.id = this.currentCategoryList[newval].id
    //         currentCategory(this.id)
    //         .then(res=>{
    //             console.log(res.data.data.data);
    //             this.currentCategoryList = res.data.data.data
    //         })
    //         .catch(err=>{
    //             console.log(err);
    //         })
    //     }
    // }
};
</script>

<style lang="less" >
    .channel_con{
        font-family: 黑体;
        h2{
            width: 100%;
            font-size: .18rem;
            height: .5rem;
            line-height: .5rem;
            text-align: center;
            color: #333;
        }
        p{
            width: 100%;
            font-size: .14rem;
            color: #666;
            text-align: center;
            height: .3rem;
            line-height: .3rem;
        }
    }
    // 商品
    .goods {
    // height: 300/100rem;
   .goods-pic{
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        font-size: 14px;
        font-family: 黑体;
        .goods_pic{
            width: 50%;
            // height: 1.7rem;
            // background-color: aqua;
            display: flex;
            flex-direction: column;
            align-items: center;
            img{
                width: 90%;
                
            }
            span{
                display: block;
                width: 100%;
                text-align: center;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                &:first-of-type{
                    font-size: 14px;
                    color: #333;
                }
                &:nth-of-type(2){
                    color: #8b0000;
                    margin-top: .1rem;
                    margin-bottom: .3rem;
                }
            }
        }
   }
}
.topic1{
    background-color: #fff;
}
</style>